<extend name="work/base_mini"/>
<block name="content">
    <link rel="stylesheet" href="https://cdn.weibuyun.com/static/admin/editor/css/editormd.min.css" />
    <script src="https://cdn.weibuyun.com/static/admin/editor/examples/js/jquery.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/editor/lib/marked.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/editor/lib/prettify.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/editor/lib/raphael.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/editor/lib/underscore.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/editor/lib/sequence-diagram.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/editor/lib/flowchart.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/editor/lib/jquery.flowchart.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/editor/editormd.min.js"></script>
    <script src="https://cdn.weibuyun.com/static/admin/js/jQuery.print.min.js"></script>

    <style>
        .task-list-item-checkbox{
            display: inline !important;
        }
        .editormd-code-toolbar select{
            display: inline !important;
        }
        .c_time{
            float: right;
            margin: 5px;
            bottom:5px;
        }
        body{
            background: #fff
        }
        #infotitle{
            text-align: center;
        }
    </style>
    <div style="background: #fff;padding: 20px;">
        <div id="printdivall">
        <div id="infotitle">
            <textarea style="display:none;">###{$info.title|default=''}-{$info.doc_type|default=''}</textarea>
        </div>
        <div id="viewinfo">
            <textarea style="display:none;">
{$info.info|raw|default=""}</textarea>
        </div>
        </div>
        <button type="button" class="layui-btn" id="printdiv">打印文档内容</button>
        <form class="layui-form" action="{:url()}" method="post">
            <div class="layui-form-item ">
                <label class="layui-form-label">附件信息</label>
                <div class="layui-input-block">
                    <input name="file_path" type="text" value="{$info.file_path|default=''}" class="layui-input"
                           readonly id="file_path_view" placeholder="无文件">
                </div>
            </div>
        </form>
        <div class="layui-form-item ">
            <label class="layui-form-label">讨论</label>
            <div class="layui-input-block">
                <ul class="layui-timeline" id="doc_comment_list">
                </ul>
                <div id="page"></div>
            </div>
        </div>
        <form class="layui-form" action="{:url()}" method="post">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">添加讨论</label>
                <div class="layui-input-block">
                    <div id="info">
                        <p></p>
                    </div>
                    <textarea name="info" id="newinfo" style="display: none"></textarea>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">附件信息</label>
                <div class="layui-input-block">
                    <input name="file_path" id="file_path" type="text" value=""
                           class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="hidden" name="doc_id" value="{$id}">
                    <input id="img_input" type="file" style=" display: none;"/>
                    <label for="img_input" class="layui-btn ">选择附件上传</label>
                    <button class="layui-btn " lay-submit lay-filter="formDemo">保存讨论</button>
                    <br>
                </div>
            </div>
            <br>
        </form>
    </div>
</block>
<block name="script">
    <script charset="utf-8" src="https://cdn.weibuyun.com/static/admin/plugins/wangeditor/wangEditor.min.js"></script>
    <script charset="utf-8" src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>
    <script type="text/javascript">
        $('#printdiv').click(function () {
            $("#printdivall").print({
                debug: false,
                importCSS: true,
                printContainer: true,
                operaSupport: false,
                title: "{$info.title|default=''}",
            });
        });
        layui.use(['element', 'table', 'form', 'formSelects', 'laypage'], function () {
            var table = layui.table
                , form = layui.form
                , laypage = layui.laypage
                , element = layui.element
                ,$=layui.$
                , formSelects = layui.formSelects
                , content = 0
                , count = 0;






            var testView = editormd.markdownToHTML("viewinfo", {
                // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
                toc:true,
                tocm:true,
                tocDropdown:true,
                htmlDecode : true,
                //markdown: "",
                autoLoadModules : true,
                flowChart: true,             // 开启流程图支持，默认关闭
                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                emoji: true,
                taskList: true,          // Enable Github Flavored Markdown task lists
            });
            var testView2 = editormd.markdownToHTML("infotitle", {
            });
            $('#file_path').click(function () {
                if ($('#file_path').val()) {
                    window.open($('#file_path').val());
                }
            });
            $('#file_path_view').click(function () {
                if ($('#file_path_view').val()) {
                    window.open($('#file_path_view').val());
                }
            });


            $('#img_input').on('change', function () {
                var index = layer.load(1, {time: 10 * 1000});
                var files = this.files[0];
                if (files) {
                    $.ajax({
                        type: "post",
                        url: "/qiniu/gettoken",
                        async: true,
                        success: function (res) {
                            if (res.code == 0) {
                                var token = res.uptoken;

                                console.log(files);
                                var fileName = res.path + files.name;
                                var downloadurl = res.downloadurl;
                                var config = {
                                    retryCount: 6,
                                };
                                var putExtra = {
                                    fname: "",
                                    params: {},
                                    mimeType: null
                                };
                                var observable = qiniu.upload(files, fileName, token, putExtra, config);
                                var subscription = observable.subscribe(
                                    {
                                        next(res) {
                                            console.log(res)
                                        },
                                        error(res) {
                                            console.log(res)
                                        },
                                        complete(res) {
                                            layer.close(index);
                                            $("#file_path").val(downloadurl + '?file=' + res.key)
                                        }
                                    }
                                );

                            } else {
                                console.log(res.msg)
                            }

                        }
                    });
                }

            });


            function getpage() {
                $.ajax({
                    url: "{:url('getcommentcount?doc_id='.$id.'&project_id='.$project_id)}",
                    type: 'get',
                    dataType: 'json',
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有更多内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            // count:res.data
                            laypage.render({
                                elem: 'page'
                                , count: res.data
                                , limit: 5
                                , theme: '#1E9FFF'
                                , jump: function (obj, first) {
                                    if (obj.curr) {
                                        refresh(obj.curr)
                                    } else {

                                        refresh(1)
                                    }

                                    return false;
                                }
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });

            }

            function refresh(curr) {
                // console.log(count)
                // console.log(curr)
                $.ajax({
                    url: "{:url('doc_comment_list?doc_id='.$id.'&project_id='.$project_id)}",
                    type: 'get',
                    dataType: 'json',
                    data: {
                        page: curr,
                        limit: 5
                    }
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有更多内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            $("#doc_comment_list").html('');
                            $.each(res.data, function (i, n) {
                                var htmlstr = ' <li class="layui-timeline-item" cid="' + n.id + '">\n' +
                                    '                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>\n' +
                                    '                                        <div class="layui-timeline-content layui-text">\n' +
                                    '                                            <h4 class="layui-timeline-title">' + n.c_time + '</h4>\n' +
                                    '                                            <ul>\n' +
                                    '                                                <li>' + n.nickname + '</li>\n'
                                if (n.file_path) {
                                    htmlstr = htmlstr + '<li><a href="' + n.file_path + '" target="_blank"> ' + n.file_path + '</a></li>\n';
                                }
                                htmlstr = htmlstr +
                                    '                                            </ul>\n' +
                                    '                                            <div class="doc_info">' + n.info + '</div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </li>'
                                $("#doc_comment_list").append(htmlstr)
                                count = res.count;
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });

            }

            getpage();
            form.on('submit(formDemo)', function (data) {
                $.ajax({
                    url: "{:url('addcomment?project_id='.$project_id)}",
                    type: 'POST',
                    dataType: 'json',
                    data: data.field
                })
                    .done(function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {
                                time: 3000,
                                icon: 1
                            }, function () {
                                getpage();
                                editor.txt.html('')
                                // $('#newinfo').val('')
                                $('#file_path').val('');
                            });
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 5
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
                return false;
            });

            var E = window.wangEditor
            var editor = new E('#info')
            // 或者 var editor = new E( document.getElementById('editor') )
            editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'image',  // 插入图片
                'table',  // 表格
                'undo',  // 撤销
                'redo'  // 重复
            ]
            editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
            editor.customConfig.uploadImgTimeout = 30000
            editor.customConfig.uploadFileName = 'file'
            editor.customConfig.uploadImgServer = '{:url("file/uploadedit",["type"=>"image"])}';
            editor.customConfig.zIndex = 100;
            editor.customConfig.onchange = function (html) {
                $('#newinfo').html(html)
            }
            editor.customConfig.customUploadImg = function (files, insert) {
                var index = layer.load(1, {time: 10 * 1000});
                $.ajax({
                    type: "post",
                    url: "/qiniu/gettoken",
                    async: true,
                    success: function (res) {
                        if (res.code == 0) {
                            var token = res.uptoken;
                            var fileName = res.path + files[0].name;
                            var downloadurl = res.downloadurl;
                            var config = {
                                retryCount: 6,
                            };
                            var putExtra = {
                                fname: "",
                                params: {},
                                mimeType: null
                            };
                            var observable = qiniu.upload(files[0], fileName, token, putExtra, config);
                            var subscription = observable.subscribe(
                                {
                                    next(res) {
                                        console.log(res)
                                    },
                                    error(res) {
                                        console.log(res)
                                    },
                                    complete(res) {
                                        layer.close(index);
                                        insert(downloadurl + '?file=' + res.key)
                                    }
                                }
                            );
                        } else {
                            console.log(res.msg)
                        }

                    }
                });
            }
            editor.create()
        });


    </script>
</block>